<template>
  <div class="app-container home">
    <!-- 顶部统计卡片 -->
    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :md="6" v-for="(item, index) in overviewCards" :key="index">
        <div class="data-card" :class="`card-${index + 1}`">
          <div class="card-header">
            <div class="icon-wrapper">
              <i :class="item.icon"></i>
            </div>
            <div class="title">{{ item.title }}</div>
            <el-button 
              type="text" 
              icon="el-icon-plus"
              class="register-btn"
              @click="handleRegister(item.type)">
              预约登记
            </el-button>
          </div>
          <div class="card-body">
            <count-to
              :start-val="0"
              :end-val="item.total"
              :duration="2500"
              :separator="','"
              :prefix="item.prefix"
              :suffix="item.suffix"
              class="card-number"
            />
            <div class="compare">
              <div class="yesterday" @click="showDetail(item.type, 'yesterday')">
                <span>昨日新增: </span>
                <count-to
                  :start-val="0"
                  :end-val="item.yesterday"
                  :duration="2500"
                  :separator="','"
                  :prefix="item.prefix"
                  :suffix="item.suffix"
                  class="increase-number"
                />
              </div>
              <div class="month" @click="showDetail(item.type, 'month')">
                <span>本月新增: </span>
                <count-to
                  :start-val="0"
                  :end-val="item.monthIncrease"
                  :duration="2500"
                  :separator="','"
                  :prefix="item.prefix"
                  :suffix="item.suffix"
                  class="increase-number"
                />
              </div>
            </div>
          </div>
          <v-chart class="trend-chart" :option="item.chartOption" autoresize />
        </div>
      </el-col>
    </el-row>

    <!-- 业务详情和排行榜 -->
    <el-row :gutter="20" style="margin-top: 20px">
      <!-- 左侧业务详情 -->
      <el-col :xs="24" :sm="24" :md="16">
        <el-card class="detail-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span class="card-title">
              <i class="el-icon-data-analysis"></i>
              业务详情分析
            </span>
            <el-radio-group v-model="currentBusiness" size="small" class="radio-group">
              <el-radio-button v-for="item in businessTypes" 
                             :key="item.value" 
                             :label="item.value">
                {{ item.label }}
              </el-radio-button>
            </el-radio-group>
          </div>
          
          <!-- 业务指标卡片 -->
          <el-row :gutter="20" class="metrics-row">
            <el-col :xs="12" :sm="12" :md="6" v-for="(metric, index) in getCurrentMetrics()" :key="index">
              <div class="metric-card">
                <div class="metric-title">{{ metric.title }}</div>
                <div class="metric-value">
                  <count-to
                    :start-val="0"
                    :end-val="metric.value"
                    :duration="2000"
                    :separator="','"
                    :prefix="metric.prefix"
                    :suffix="metric.suffix"
                  />
                </div>
                <div class="metric-compare">
                  <el-tag :type="metric.trend === 'up' ? 'success' : 'danger'" size="small">
                    {{ metric.trend === 'up' ? '↑' : '↓' }} {{ metric.rate }}%
                  </el-tag>
                </div>
              </div>
            </el-col>
          </el-row>

          <!-- 业务趋势图 -->
          <v-chart class="business-chart" :option="getCurrentChartOption()" autoresize />
        </el-card>
      </el-col>

      <!-- 右侧排行榜 -->
      <el-col :xs="24" :sm="24" :md="8">
        <el-card class="rank-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span class="card-title">
              <i class="el-icon-trophy"></i>
              {{ businessTypes.find(t => t.value === currentBusiness).label }}排行榜
            </span>
          </div>
          <div class="rank-list">
            <div v-for="(item, index) in rankingData[currentBusiness]" 
                 :key="index"
                 class="rank-item"
                 :class="{'top-three': index < 3}">
              <div class="rank-left">
                <div class="rank-number" :class="`rank-${index + 1}`">{{ index + 1 }}</div>
                <el-avatar :size="isMobile ? 36 : 40" class="rank-avatar">
                  {{ item.name.substr(0,1) }}
                </el-avatar>
                <div class="rank-info">
                  <div class="rank-name">{{ item.name }}</div>
                  <div class="rank-dept">{{ item.department }}</div>
                </div>
              </div>
              <div class="rank-right">
                <count-to
                  :start-val="0"
                  :end-val="item.amount"
                  :duration="2000"
                  :separator="','"
                  :prefix="item.prefix"
                  :suffix="item.suffix"
                  class="rank-score"
                />
                <div class="rank-trend">
                  <i class="el-icon-top" v-if="index < 3"></i>
                  <i class="el-icon-bottom" v-else></i>
                  <span>{{ index < 3 ? '+' : '-' }}{{ Math.floor(Math.random() * 5 + 1) }}%</span>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 详情弹窗 -->
    <el-dialog
      :title="detailTitle"
      :visible.sync="detailVisible"
      :width="isMobile ? '95%' : '1000px'"
      custom-class="detail-dialog">
      <div class="detail-container">
        <!-- 顶部统计卡片 -->
        <el-row :gutter="isMobile ? 10 : 20" class="summary-cards">
          <el-col :xs="24" :sm="8" v-for="(stat, index) in summaryStats" :key="index">
            <div class="summary-card">
              <div class="card-title">{{ stat.title }}</div>
              <div class="card-value">
                <count-to
                  :start-val="0"
                  :end-val="stat.value"
                  :duration="2000"
                  :separator="','"
                  :prefix="stat.prefix"
                />
              </div>
              <div class="card-compare">
                <el-tag :type="stat.trend === 'up' ? 'success' : 'danger'" size="small">
                  {{ stat.trend === 'up' ? '↑' : '↓' }} {{ stat.rate }}%
                </el-tag>
                <span class="compare-text">较上期</span>
              </div>
            </div>
          </el-col>
        </el-row>

        <!-- 图表展示 -->
        <div class="chart-container">
          <el-tabs v-model="activeChart">
            <el-tab-pane label="趋势图" name="trend">
              <v-chart :option="trendOption" autoresize :style="{ height: isMobile ? '250px' : '300px' }"/>
            </el-tab-pane>
            <el-tab-pane label="占比图" name="proportion">
              <v-chart :option="pieOption" autoresize :style="{ height: isMobile ? '250px' : '300px' }"/>
            </el-tab-pane>
          </el-tabs>
        </div>

        <!-- 详细数据表格 -->
        <div class="table-container">
          <div class="table-header">
            <div class="header-title">明细数据</div>
            <div class="header-actions">
              <el-radio-group v-model="timeRange" size="small" :class="{'mobile-radio': isMobile}">
                <el-radio-button label="week">本周</el-radio-button>
                <el-radio-button label="month">本月</el-radio-button>
                <el-radio-button label="quarter">本季度</el-radio-button>
              </el-radio-group>
              <el-button type="primary" size="small" icon="el-icon-download" class="export-btn">导出</el-button>
            </div>
          </div>
          <el-table 
            :data="detailData" 
            stripe 
            style="width: 100%"
            :size="isMobile ? 'mini' : 'medium'"
            class="detail-table">
            <el-table-column prop="date" label="日期" width="120"/>
            <el-table-column prop="name" label="产品名称" width="150"/>
            <el-table-column prop="amount" label="金额">
              <template slot-scope="scope">
                <span class="amount-cell">{{ scope.row.prefix }}{{ scope.row.amount.toLocaleString() }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="customers" label="客户数" width="100">
              <template slot-scope="scope">
                <span class="customer-cell">{{ scope.row.customers }}户</span>
              </template>
            </el-table-column>
            <el-table-column prop="rate" label="占比" width="120">
              <template slot-scope="scope">
                <el-progress 
                  :percentage="scope.row.rate" 
                  :color="customColors"
                  :format="format"
                  :stroke-width="15"/>
              </template>
            </el-table-column>
            <el-table-column prop="trend" label="趋势" width="100">
              <template slot-scope="scope">
                <el-tag :type="scope.row.trend === 'up' ? 'success' : 'danger'" size="small">
                  {{ scope.row.trend === 'up' ? '↑' : '↓' }} {{ scope.row.trendRate }}%
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-dialog>

    <!-- 预约登记弹窗 -->
    <el-dialog
      :title="registerTitle"
      :visible.sync="registerVisible"
      :width="isMobile ? '95%' : '500px'"
      custom-class="register-dialog">
      <el-form 
        :model="registerForm" 
        ref="registerForm" 
        :rules="rules" 
        :label-width="isMobile ? '90px' : '110px'"
        :size="isMobile ? 'small' : 'medium'">
        <el-form-item label="产品类型" prop="productType">
          <el-select 
            v-model="registerForm.productType" 
            placeholder="请选择产品类型"
            style="width: 100%">
            <el-option
              v-for="item in depositProducts"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="预约日期" prop="appointDate">
          <el-date-picker
            v-model="registerForm.appointDate"
            type="date"
            placeholder="选择预约日期"
            :picker-options="dateOptions"
            value-format="yyyy-MM-dd"
            style="width: 100%">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="预约金额(万)" prop="amount">
          <el-input-number 
            v-model="registerForm.amount"
            :precision="0"
            :step="1"
            :min="0">
            <template slot="append">万元</template>
          </el-input-number>
        </el-form-item>
        <el-form-item label="客户姓名" prop="customerName">
          <el-input 
            v-model="registerForm.customerName"
            placeholder="请输入客户姓名">
          </el-input>
        </el-form-item>
        <el-form-item label="证件号码" prop="idNumber">
          <el-input 
            v-model="registerForm.idNumber"
            placeholder="请输入身份证或统一社会信用代码">
          </el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input 
            type="textarea" 
            v-model="registerForm.remark"
            :rows="isMobile ? 3 : 4"
            placeholder="请输入备注信息">
          </el-input>
        </el-form-item>
        <el-form-item label="附件" prop="files">
          <el-upload
            class="upload-demo"
            action="/dev-api/common/upload"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="5"
            :on-exceed="handleExceed"
            :file-list="fileList">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">可上传任意文件，单个文件不超过10MB</div>
          </el-upload>
        </el-form-item>
        <div class="form-tip">
          <i class="el-icon-info"></i>
          提前预约以证件号码匹配
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button 
          @click="registerVisible = false"
          :size="isMobile ? 'small' : 'medium'">
          取 消
        </el-button>
        <el-button 
          type="primary" 
          @click=" submitRegister"
          :size="isMobile ? 'small' : 'medium'">
          确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import CountTo from 'vue-count-to'
import VChart from 'vue-echarts'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart, PieChart, BarChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
} from 'echarts/components'

import { listDeposit, getDeposit, delDeposit, addDeposit, updateDeposit } from "@/api/proprice/deposit";

use([
  CanvasRenderer,
  LineChart,
  PieChart,
  BarChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
])

export default {
  name: "Index",
  components: {
    CountTo,
    VChart
  },
  data() {
    // 身份证号码验证
    const validateIdNumber = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入证件号码'))
      } else if (value.length === 18) {
        // 身份证号码验证
        const reg = /(^\d{18}$)|(^\d{17}(\d|X|x)$)/
        if (!reg.test(value)) {
          callback(new Error('请输入正确的身份证号码'))
        } else {
          callback()
        }
      } else if (value.length === 18) {
        // 统一社会信用代码验证
        const reg = /^[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}$/
        if (!reg.test(value)) {
          callback(new Error('请输入正确的统一社会信用代码'))
        } else {
          callback()
        }
      } else {
        callback(new Error('请输入正确的证件号码'))
      }
    }

    return {
      currentBusiness: 'deposit',
      businessTypes: [
        { label: '存款', value: 'deposit' },
        { label: '贷款', value: 'loan' },
        { label: '电子银行', value: 'ebank' },
        { label: '理财', value: 'finance' }
      ],
      overviewCards: [
        {
          title: '存款总量',
          type: 'deposit',
          icon: 'el-icon-money',
          total: 85000,
          yesterday: 500,
          monthIncrease: 8500,
          prefix: '¥',
          chartOption: this.generateTrendOption([5000, 5200, 5400, 5300, 5600, 5800, 6000])
        },
        {
          title: '贷款总量',
          type: 'loan',
          icon: 'el-icon-bank-card',
          total: 62000,
          yesterday: 300,
          monthIncrease: 6000,
          prefix: '¥',
          chartOption: this.generateTrendOption([4000, 4200, 4400, 4600, 4500, 4800, 5000])
        },
        {
          title: '电子银行',
          type: 'ebank',
          icon: 'el-icon-mobile',
          total: 25000,
          yesterday: 300,
          monthIncrease: 4500,
          prefix: '¥',
          chartOption: this.generateTrendOption([1800, 1900, 2000, 2100, 2200, 2300, 2500])
        },
        {
          title: '理财产品',
          type: 'finance',
          icon: 'el-icon-wallet',
          total: 35000,
          yesterday: 400,
          monthIncrease: 5500,
          prefix: '¥',
          chartOption: this.generateTrendOption([2000, 2200, 2400, 2600, 2800, 3000, 3200])
        }
      ],
      businessData: {
        deposit: {
          metrics: [
            { title: '活期存款', value: 45000, trend: 'up', rate: 5.2 },
            { title: '定期存款', value: 40000, trend: 'up', rate: 4.8 },
            { title: '本月新增', value: 8500, trend: 'up', rate: 6.3 },
            { title: '客户数量', value: 120, trend: 'up', rate: 3.5, suffix: '户' }
          ]
        },
        loan: {
          metrics: [
            { title: '个人贷款', value: 32000, trend: 'up', rate: 4.2 },
            { title: '小微贷款', value: 30000, trend: 'up', rate: 3.8 },
            { title: '本月新增', value: 6000, trend: 'up', rate: 5.3 },
            { title: '客户数量', value: 85, trend: 'up', rate: 2.5, suffix: '户' }
          ]
        },
        ebank: {
          metrics: [
            { title: '收单商户', value: 12000, trend: 'up', rate: 6.2 },
            { title: '手机银行', value: 8000, trend: 'up', rate: 5.8 },
            { title: '本月新增', value: 4500, trend: 'up', rate: 7.3 },
            { title: '客户数量', value: 150, trend: 'up', rate: 4.5, suffix: '户' }
          ]
        },
        finance: {
          metrics: [
            { title: '理财产品', value: 20000, trend: 'up', rate: 5.2 },
            { title: '基金产品', value: 15000, trend: 'up', rate: 4.8 },
            { title: '本月新增', value: 5500, trend: 'up', rate: 6.3 },
            { title: '客户数量', value: 95, trend: 'up', rate: 3.5, suffix: '户' }
          ]
        }
      },
      isMobile: false,
      detailVisible: false,
      detailTitle: '',
      activeChart: 'trend',
      timeRange: 'month',
      customColors: [
        {color: '#f56c6c', percentage: 20},
        {color: '#e6a23c', percentage: 40},
        {color: '#5cb87a', percentage: 60},
        {color: '#1989fa', percentage: 80},
        {color: '#6f7ad3', percentage: 100}
      ],
      summaryStats: [],
      detailData: [],
      registerVisible: false,
      registerTitle: '',
      currentType: '',
      registerForm: {
        productType: '',
        appointDate: '',
        amount: 0,
        customerName: '',
        idNumber: '',
        remark: '',
        files: []
      },
      rules: {
        productType: [
          { required: true, message: '请选择产品类型', trigger: 'change' }
        ],
        appointDate: [
          { required: true, message: '请选择预约日期', trigger: 'change' }
        ],
        amount: [
          { required: true, message: '请输入预约金额', trigger: 'blur' },
          { type: 'number', min: 0, message: '金额必须大于0', trigger: 'blur' }
        ],
        customerName: [
          { max: 50, message: '客户姓名长度不能超过50个字符', trigger: 'blur' }
        ],
        idNumber: [
          { required: true, message: '请输入证件号码', trigger: 'blur' },
          { validator: validateIdNumber, trigger: 'blur' }
        ]
      },
      productTypes: {
        deposit: [
          { label: '定期存款', value: '定期存款' },
          { label: '个人活期', value: '个人活期' },
          { label: '对公活期', value: '对公活期' }
        ],
        loan: [
          { label: '个人贷款', value: 'personal' },
          { label: '企业贷款', value: 'business' }
        ],
        ebank: [
          { label: '手机银行', value: 'mobile' },
          { label: '收单商户', value: 'pos' },
          { label: 'ETC', value: 'etc' },
          { label: '社保卡', value: 'social' }
        ],
        finance: [
          { label: '理财产品', value: 'wealth' },
          { label: '基金产品', value: 'fund' },
          { label: '保险产品', value: 'insurance' }
        ]
      },
      rankingData: {
        deposit: [
          { name: "殷一", department: "数字金融部", amount: 15000, prefix: '¥' },
          { name: "李二", department: "公司金融部", amount: 14000, prefix: '¥' },
          { name: "王三", department: "零售业务部", amount: 13000, prefix: '¥' },
          { name: "赵四", department: "财富金融部", amount: 12000, prefix: '¥' },
          { name: "钱五", department: "数字金融部", amount: 11000, prefix: '¥' },
          { name: "孙六", department: "电子银行部", amount: 10000, prefix: '¥' },
          { name: "周七", department: "个人金融部", amount: 9000, prefix: '¥' },
          { name: "吴八", department: "公司金融部", amount: 8000, prefix: '¥' },
          { name: "郑九", department: "零售业务部", amount: 7000, prefix: '¥' },
          { name: "王十", department: "个人金融部", amount: 6000, prefix: '¥' }
        ],
        loan: [
          { name: "李明", department: "信贷部", amount: 12000, prefix: '¥' },
          { name: "张华", department: "零售信贷部", amount: 11500, prefix: '¥' },
          { name: "王强", department: "公司信贷部", amount: 11000, prefix: '¥' },
          { name: "刘芳", department: "信贷部", amount: 10500, prefix: '¥' },
          { name: "陈明", department: "零售信贷部", amount: 10000, prefix: '¥' },
          { name: "杨华", department: "公司信贷部", amount: 9500, prefix: '¥' },
          { name: "张强", department: "信贷部", amount: 9000, prefix: '¥' },
          { name: "王芳", department: "零售信贷部", amount: 8500, prefix: '¥' },
          { name: "李明", department: "公司信贷部", amount: 8000, prefix: '¥' },
          { name: "赵华", department: "信贷部", amount: 7500, prefix: '¥' }
        ],
        ebank: [
          { name: "刘洋", department: "电子银行部", amount: 8000, prefix: '¥' },
          { name: "陈静", department: "网点运营部", amount: 7500, prefix: '¥' },
          { name: "杨明", department: "零售业务部", amount: 7000, prefix: '¥' },
          { name: "王亮", department: "电子银行部", amount: 6500, prefix: '¥' },
          { name: "张静", department: "网点运营部", amount: 6000, prefix: '¥' },
          { name: "李明", department: "零售业务部", amount: 5500, prefix: '¥' },
          { name: "赵亮", department: "电子银行部", amount: 5000, prefix: '¥' },
          { name: "钱静", department: "网点运营部", amount: 4500, prefix: '¥' },
          { name: "孙明", department: "零售业务部", amount: 4000, prefix: '¥' },
          { name: "周亮", department: "电子银行部", amount: 3500, prefix: '¥' }
        ],
        finance: [
          { name: "周婷", department: "理财中心", amount: 9000, prefix: '¥' },
          { name: "赵阳", department: "投资理财部", amount: 8500, prefix: '¥' },
          { name: "钱莉", department: "私人银行部", amount: 8000, prefix: '¥' },
          { name: "孙芳", department: "理财中心", amount: 7500, prefix: '¥' },
          { name: "李阳", department: "投资理财部", amount: 7000, prefix: '¥' },
          { name: "王莉", department: "私人银行部", amount: 6500, prefix: '¥' },
          { name: "张芳", department: "理财中心", amount: 6000, prefix: '¥' },
          { name: "陈阳", department: "投资理财部", amount: 5500, prefix: '¥' },
          { name: "杨莉", department: "私人银行部", amount: 5000, prefix: '¥' },
          { name: "刘芳", department: "理财中心", amount: 4500, prefix: '¥' }
        ]
      },
      trendOption: {},
      pieOption: {},
      depositProducts: [
        { label: '定期存款', value: '定期存款' },
        { label: '个人活期', value: '个人活期' },
        { label: '对公活期', value: '对公活期' }
      ],
      dateOptions: {
        disabledDate(time) {
          return time.getTime() <= Date.now() //- 8.64e7 // 禁用今天之前的日期
        }
      },
      fileList: []
    }
  },
  mounted() {
    this.checkDevice()
    window.addEventListener('resize', this.checkDevice)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.checkDevice)
  },
  methods: {
    generateTrendOption(data) {
      return {
        grid: {
          top: 0,
          right: 0,
          bottom: 0,
          left: 0
        },
        xAxis: {
          type: 'category',
          show: false
        },
        yAxis: {
          type: 'value',
          show: false
        },
        series: [{
          data: data,
          type: 'line',
          smooth: true,
          showSymbol: false,
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.5)',
            width: 2
          },
          areaStyle: {
            color: 'rgba(255, 255, 255, 0.2)'
          }
        }]
      }
    },
    getCurrentMetrics() {
      return this.businessData[this.currentBusiness].metrics
    },
    getCurrentRanking() {
      return this.businessData[this.currentBusiness].ranking
    },
    getCurrentChartOption() {
      // 这里返回业务趋势图的配置
      return {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['总量', '新增']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '总量',
            type: 'line',
            smooth: true,
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          },
          {
            name: '新增',
            type: 'line',
            smooth: true,
            data: [120, 132, 101, 134, 90, 230, 210]
          }
        ]
      }
    },
    checkDevice() {
      this.isMobile = window.innerWidth <= 768
    },
    showDetail(type, period) {
      const typeNames = {
        deposit: '存款',
        loan: '贷款',
        ebank: '电子银行',
        finance: '理财产品'
      }
      
      this.detailTitle = `${typeNames[type]}${period === 'month' ? '本月' : '昨日'}新增明细`
      
      // 初始化图表数据
      this.initChartOptions(type, period)
      this.initDetailData(type, period)
      this.detailVisible = true
    },
    handleRegister(type) {
      this.currentType = type
      this.registerTitle = '存款预约登记'
      this.registerForm = {
        productType: '',
        appointDate: '',
        amount: 0,
        customerName: '',
        idNumber: '',
        remark: '',
        files: []
      }
      this.registerVisible = true
    },
    submitRegister() {
      this.$refs.registerForm.validate((valid) => {
        if (valid) {
          console.log('提交的表单数据：', this.registerForm)
          // 这里添加提交逻辑
          addDeposit(this.registerForm).then(response => {
            if(response.code == 200){
          this.$message.success('预约登记成功')
          this.registerVisible = false;
        }
        });
      }
    });
  },
    getTypeTitle(type) {
      const titles = {
        deposit: '存款',
        loan: '贷款',
        ebank: '电子银行',
        finance: '理财产品'
      }
      return titles[type] || ''
    },
    initDetailData(type, period) {
      // 生成汇总统计数据
      this.summaryStats = this.generateSummaryStats(type, period)
      // 生成详细数据
      this.detailData = this.generateDetailData(type, period)
      // 生成图表配置
      this.trendOption = this.generateTrendOption(type, period)
      this.pieOption = this.generatePieOption(type, period)
    },
    format(percentage) {
      return percentage + '%'
    },
    generateDetailData(type, period) {
      // 根据不同类型生成不同的明细数据
      const details = {
        deposit: [
          { name: '活期存款', amount: 300, prefix: '¥', date: '2024-01-20', customers: 5 },
          { name: '定期存款', amount: 200, prefix: '¥', date: '2024-01-20', customers: 3 },
          { name: '协议存款', amount: 150, prefix: '¥', date: '2024-01-20', customers: 2 }
        ],
        loan: [
          { name: '个人贷款', amount: 200, prefix: '¥', date: '2024-01-20', customers: 2 },
          { name: '小微贷款', amount: 100, prefix: '¥', date: '2024-01-20', customers: 1 },
          { name: '消费贷款', amount: 150, prefix: '¥', date: '2024-01-20', customers: 3 }
        ],
        ebank: [
          { name: '手机银行', amount: 150, prefix: '¥', date: '2024-01-20', customers: 10 },
          { name: '收单商户', amount: 100, prefix: '¥', date: '2024-01-20', customers: 2 },
          { name: 'ETC', amount: 50, prefix: '¥', date: '2024-01-20', customers: 5 },
          { name: '社保卡', amount: 80, prefix: '¥', date: '2024-01-20', customers: 4 }
        ],
        finance: [
          { name: '理财产品', amount: 250, prefix: '¥', date: '2024-01-20', customers: 3 },
          { name: '基金产品', amount: 150, prefix: '¥', date: '2024-01-20', customers: 2 },
          { name: '保险产品', amount: 100, prefix: '¥', date: '2024-01-20', customers: 1 }
        ]
      }
      
      // 如果是月度数据，调整日期格式和数据规模
      if (period === 'month') {
        return details[type].map(item => ({
          ...item,
          amount: item.amount * 15, // 月度数据量更大
          date: '2024-01',
          customers: item.customers * 3 // 月度客户数更多
        }))
      }
      
      return details[type] || []
    },
    generateSummaryStats(type, period) {
      // 这里需要实现生成汇总统计数据的逻辑
      // 这里只是一个示例，实际实现需要根据业务需求来实现
      return [
        { title: '活期存款', value: 45000, trend: 'up', rate: 5.2 },
        { title: '定期存款', value: 40000, trend: 'up', rate: 4.8 },
        { title: '本月新增', value: 8500, trend: 'up', rate: 6.3 },
        { title: '客户数量', value: 120, trend: 'up', rate: 3.5, suffix: '户' }
      ]
    },
    generateTrendOption(type, period) {
      // 这里需要实现生成趋势图配置的逻辑
      // 这里只是一个示例，实际实现需要根据业务需求来实现
      return {
        grid: {
          top: 0,
          right: 0,
          bottom: 0,
          left: 0
        },
        xAxis: {
          type: 'category',
          show: false
        },
        yAxis: {
          type: 'value',
          show: false
        },
        series: [{
          data: [5000, 5200, 5400, 5300, 5600, 5800, 6000],
          type: 'line',
          smooth: true,
          showSymbol: false,
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.5)',
            width: 2
          },
          areaStyle: {
            color: 'rgba(255, 255, 255, 0.2)'
          }
        }]
      }
    },
    generatePieOption(type, period) {
      // 这里需要实现生成占比图配置的逻辑
      // 这里只是一个示例，实际实现需要根据业务需求来实现
      return {
        grid: {
          top: 0,
          right: 0,
          bottom: 0,
          left: 0
        },
        series: [{
          type: 'pie',
          radius: ['40%', '70%'],
          data: [
            { value: 45000, name: '活期存款' },
            { value: 40000, name: '定期存款' },
            { value: 8500, name: '本月新增' },
            { value: 120, name: '客户数量' }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          },
          label: {
            show: true,
            formatter: '{b}: {c} ({d}%)'
          },
          labelLine: {
            show: true
          },
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          dataLabels: {
            formatter: '{b}: {c} ({d}%)'
          }
        }]
      }
    },
    initChartOptions(type, period) {
      // 根据类型和周期生成不同的数据
      const dates = period === 'month' 
        ? ['1号', '5号', '10号', '15号', '20号', '25号', '30号']
        : ['0时', '4时', '8时', '12时', '16时', '20时', '24时'];
      
      const baseData = period === 'month' ? 1000 : 100;
      const data = dates.map(() => Math.floor(Math.random() * baseData + baseData));
      const data2 = dates.map(() => Math.floor(Math.random() * baseData * 0.5 + baseData * 0.5));

      // 设置趋势图配置
      this.trendOption = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['总量', '新增'],
          right: 10,
          top: 10
        },
        grid: {
          top: 50,
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: dates,
          axisLine: {
            lineStyle: {
              color: '#999'
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#999'
            }
          },
          splitLine: {
            lineStyle: {
              color: ['#eee']
            }
          }
        },
        series: [
          {
            name: '总量',
            type: 'line',
            smooth: true,
            data: data,
            itemStyle: {
              color: '#1890ff'
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: 'rgba(24,144,255,0.3)'
                }, {
                  offset: 1,
                  color: 'rgba(24,144,255,0.1)'
                }]
              }
            }
          },
          {
            name: '新增',
            type: 'line',
            smooth: true,
            data: data2,
            itemStyle: {
              color: '#52c41a'
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: 'rgba(82,196,26,0.3)'
                }, {
                  offset: 1,
                  color: 'rgba(82,196,26,0.1)'
                }]
              }
            }
          }
        ]
      }

      // 设置饼图配置
      this.pieOption = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          right: 10,
          top: 'center'
        },
        series: [
          {
            name: '分布情况',
            type: 'pie',
            radius: ['50%', '70%'],
            center: ['40%', '50%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '14',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.generatePieData(type)
          }
        ]
      }
    },
    generatePieData(type) {
      const dataMap = {
        deposit: [
          { value: 45000, name: '活期存款' },
          { value: 40000, name: '定期存款' },
          { value: 30000, name: '协议存款' },
          { value: 20000, name: '其他存款' }
        ],
        loan: [
          { value: 32000, name: '个人贷款' },
          { value: 30000, name: '小微贷款' },
          { value: 25000, name: '企业贷款' },
          { value: 15000, name: '其他贷款' }
        ],
        ebank: [
          { value: 12000, name: '手机银行' },
          { value: 8000, name: '网上银行' },
          { value: 6000, name: 'APP' },
          { value: 4000, name: '其他渠道' }
        ],
        finance: [
          { value: 20000, name: '理财产品' },
          { value: 15000, name: '基金产品' },
          { value: 10000, name: '保险产品' },
          { value: 5000, name: '其他产品' }
        ]
      }
      return dataMap[type] || []
    },
    handleRemove(file, fileList) {
      this.fileList = fileList
    },
    handlePreview(file) {
      // 处理文件预览
    },
    beforeRemove(file) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    }
  }
}
</script>

<style lang="scss" scoped>
.home {
  .data-card {
    margin-bottom: 20px;
    padding: 20px;
    border-radius: 12px;
    height: 200px;
    position: relative;
    overflow: hidden;
    color: white;
    transition: all 0.3s;
    
    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 15px 30px rgba(0,0,0,0.1);
      
      .trend-chart {
        opacity: 0.4;
      }
    }

    &.card-1 { background: linear-gradient(135deg, #1890ff, #36cfc9); }
    &.card-2 { background: linear-gradient(135deg, #722ed1, #eb2f96); }
    &.card-3 { background: linear-gradient(135deg, #52c41a, #13c2c2); }
    &.card-4 { background: linear-gradient(135deg, #faad14, #fa541c); }

    .card-header {
      display: flex;
      align-items: center;
      .icon-wrapper {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: rgba(255,255,255,0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        i {
          font-size: 24px;
        }
      }
      .title {
        margin-left: 15px;
        font-size: 16px;
        font-weight: bold;
      }
      .register-btn {
        position: absolute;
        right: 20px;
        top: 5px;
        color: rgba(255, 255, 255, 0.8);
        padding: 5px 10px;
        border-radius: 4px;
        font-size: 13px;
        
        &:hover {
          color: #fff;
          background: rgba(255, 255, 255, 0.1);
        }
      }
    }

    .card-body {
      margin-top: 20px;
      .card-number {
        font-size: 28px;
        font-weight: bold;
      }
      .compare {
        margin-top: 10px;
        font-size: 14px;
        opacity: 0.8;
        
        .yesterday, .month {
          display: flex;
          justify-content: space-between;
          margin-top: 5px;
        }
        
        .increase-number {
          font-size: 14px;
          margin-left: 4px;
          &.up {
            color: #52c41a;
          }
        }
      }
    }

    .trend-chart {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 50px;
      opacity: 0.2;
      transition: opacity 0.3s;
    }
  }

  .detail-card {
    margin-bottom: 20px;
    
    .radio-group {
      margin-top: 10px;
      @media screen and (min-width: 768px) {
        margin-top: 0;
        float: right;
      }
    }
    
    .metrics-row {
      .metric-card {
        margin-bottom: 15px;
        
        .metric-value {
          font-size: 18px;
          @media screen and (min-width: 768px) {
            font-size: 24px;
          }
        }
      }
    }
    
    .business-chart {
      height: 250px;
      @media screen and (min-width: 768px) {
        height: 300px;
      }
    }
  }

  .rank-card {
    .rank-list {
      padding: 0 10px;
      
      .rank-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 10px;
        margin-bottom: 10px;
        background: #f8f9fa;
        border-radius: 8px;
        transition: all 0.3s ease;
        
        &:hover {
          transform: translateX(5px);
          background: #f0f2f5;
        }
        
        &.top-three {
          background: linear-gradient(90deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.7) 100%);
          box-shadow: 0 2px 12px rgba(0,0,0,0.1);
          
          .rank-number {
            color: #fff;
            font-weight: bold;
          }
          
          &:nth-child(1) {
            background: linear-gradient(90deg, #ffd700 0%, #fff4d1 100%);
            .rank-number { background: #f5c518; }
          }
          
          &:nth-child(2) {
            background: linear-gradient(90deg, #c0c0c0 0%, #f5f5f5 100%);
            .rank-number { background: #a8a8a8; }
          }
          
          &:nth-child(3) {
            background: linear-gradient(90deg, #cd7f32 0%, #ffdbc5 100%);
            .rank-number { background: #b87333; }
          }
        }

        .rank-left {
          display: flex;
          align-items: center;
          
          .rank-number {
            width: 24px;
            height: 24px;
            line-height: 24px;
            text-align: center;
            background: #e0e0e0;
            color: #666;
            border-radius: 4px;
            margin-right: 12px;
            font-size: 14px;
            font-weight: 500;
          }
          
          .rank-avatar {
            margin-right: 12px;
            background: linear-gradient(135deg, #1890ff, #36cfc9);
            color: #fff;
            font-weight: bold;
          }
          
          .rank-info {
            .rank-name {
              font-size: 15px;
              font-weight: 500;
              color: #333;
              margin-bottom: 4px;
            }
            
            .rank-dept {
              font-size: 12px;
              color: #999;
            }
          }
        }

        .rank-right {
          text-align: right;
          
          .rank-score {
            font-size: 16px;
            font-weight: bold;
            color: #333;
            margin-bottom: 4px;
          }
          
          .rank-trend {
            font-size: 12px;
            
            i {
              margin-right: 4px;
              &.el-icon-top { color: #52c41a; }
              &.el-icon-bottom { color: #ff4d4f; }
            }
            
            span {
              color: #666;
            }
          }
        }
      }
    }
  }
}

// 移动端适配样式
@media screen and (max-width: 768px) {
  .home {
    .data-card {
      .card-header {
        .register-btn {
          top: 3px;
          right: 10px;
          padding: 3px 8px;
          font-size: 12px;
        }
      }
    }
  }
}

// 弹窗样式优化
.el-dialog {
  .el-dialog__body {
    padding: 20px;
  }
  
  .el-table {
    margin: 10px 0;
    
    th {
      background-color: #f5f7fa;
      color: #606266;
    }
    
    .el-table__row:hover {
      background-color: #f5f7fa;
    }
  }
}

.detail-dialog {
  ::v-deep .el-dialog__body {
    padding: 20px 30px;
    
    @media screen and (max-width: 768px) {
      padding: 15px;
    }
  }
  
  .detail-container {
    .summary-cards {
      margin-bottom: 24px;
      
      @media screen and (max-width: 768px) {
        margin-bottom: 15px;
      }
      
      .summary-card {
        background: #f5f7fa;
        border-radius: 8px;
        padding: 16px;
        height: 120px;
        margin-bottom: 10px;
        
        @media screen and (max-width: 768px) {
          height: auto;
          padding: 12px;
          
          .card-title {
            font-size: 13px;
          }
          
          .card-value {
            font-size: 20px !important;
            margin: 6px 0 !important;
          }
        }
      }
    }
    
    .chart-container {
      margin-bottom: 24px;
      
      @media screen and (max-width: 768px) {
        margin-bottom: 15px;
      }
      
      ::v-deep .el-tabs__header {
        margin-bottom: 10px;
      }
    }
    
    .table-container {
      .table-header {
        @media screen and (max-width: 768px) {
          flex-direction: column;
          gap: 10px;
          align-items: flex-start;
          
          .header-actions {
            width: 100%;
            justify-content: space-between;
            
            .mobile-radio {
              transform: scale(0.9);
              transform-origin: left;
            }
            
            .export-btn {
              margin-left: 0;
            }
          }
        }
      }
      
      .detail-table {
        @media screen and (max-width: 768px) {
          ::v-deep {
            .el-table__header th {
              padding: 8px 0;
              font-size: 13px;
            }
            
            .el-table__body td {
              padding: 8px 0;
            }
            
            .amount-cell {
              font-size: 13px;
            }
            
            .customer-cell {
              font-size: 13px;
            }
            
            .el-progress {
              width: 80px;
            }
          }
        }
      }
    }
  }
}

// 移动端弹窗全局样式
::v-deep .el-dialog {
  @media screen and (max-width: 768px) {
    margin-top: 5vh !important;
    
    .el-dialog__header {
      padding: 15px;
      
      .el-dialog__title {
        font-size: 16px;
      }
    }
    
    .el-dialog__body {
      max-height: 80vh;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
  }
}

// 移动端表格横向滚动
::v-deep .el-table {
  @media screen and (max-width: 768px) {
    .el-table__body-wrapper {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
  }
}

// 预约登记弹窗样式
.register-dialog {
  ::v-deep .el-dialog__body {
    padding: 20px;
    
    @media screen and (max-width: 768px) {
      padding: 15px;
    }
  }
  
  ::v-deep .el-form {
    .el-form-item {
      margin-bottom: 20px;
      
      @media screen and (max-width: 768px) {
        margin-bottom: 15px;
      }
      
      .el-form-item__label {
        @media screen and (max-width: 768px) {
          font-size: 14px;
          padding-right: 8px;
        }
      }
      
      .el-form-item__content {
        .el-input,
        .el-select,
        .el-input-number {
          @media screen and (max-width: 768px) {
            font-size: 14px;
          }
        }
        
        .el-input-number {
          width: 100%;
          
          .el-input-number__decrease,
          .el-input-number__increase {
            @media screen and (max-width: 768px) {
              width: 28px;
            }
          }
        }
      }
    }
  }
  
  ::v-deep .el-dialog__footer {
    padding: 10px 20px 20px;
    
    @media screen and (max-width: 768px) {
      padding: 10px 15px 15px;
      
      .dialog-footer {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        
        .el-button {
          margin-left: 0;
          padding: 8px 15px;
          font-size: 14px;
          flex: 1;  // 按钮等宽
        }
      }
    }
  }
}

// 移动端全局弹窗样式优化
::v-deep .el-dialog {
  @media screen and (max-width: 768px) {
    margin-top: 10vh !important;
    
    .el-dialog__header {
      padding: 15px;
      
      .el-dialog__title {
        font-size: 16px;
      }
      
      .el-dialog__headerbtn {
        top: 12px;
        right: 12px;
      }
    }
    
    .el-dialog__body {
      max-height: 70vh;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
  }
}

.register-dialog {
  ::v-deep .el-input-number {
    .el-input__inner {
      text-align: left;
    }
    .el-input-group__append {
      background-color: #f5f7fa;
      color: #909399;
      padding: 0 10px;
    }
  }
}

.form-tip {
  color: #909399;
  font-size: 12px;
  margin-top: -10px;
  padding-left: 110px;
  
  @media screen and (max-width: 768px) {
    padding-left: 90px;
  }
  
  i {
    margin-right: 4px;
    font-size: 14px;
    vertical-align: middle;
  }
}

::v-deep .el-form-item {
  margin-bottom: 22px;  // 稍微增加表单项间距
  
  &:last-child {
    margin-bottom: 5px;  // 最后一个表单项底部间距调小
  }
}

.upload-demo {
  .el-upload__tip {
    color: #909399;
    font-size: 12px;
    margin-top: 5px;
  }
}
</style>